<template>
    <div class="page-container page-customerManage">
        <el-form>
            <el-form-item label="活动内容:">
                <span style="margin-right: 20px">{{activity.name}}</span>
                <span>企业使用总人数:{{activity.setMeal}}</span>
            </el-form-item>
            <el-form-item label="活动时间:">
                <span>{{activity.startTime}} - {{activity.endTime}}</span>
            </el-form-item>
            <el-form-item label="活动状态:">
                <span>{{activity.status == 0 ? '待上线' : activity.status == 1 ? '进行中' : activity.status == 2 ? '已结束' : ''}}</span>
            </el-form-item>
            <el-form-item label="发布时间:">
                <span>{{activity.publishTime}}</span>
            </el-form-item>
            <el-row>
                <el-col :span="4">
                    订单数量:{{orderNum}}
                </el-col>
                <el-col :span="4">
                    订单金额:{{orderPrice}} 元
                </el-col>
            </el-row>
        </el-form>
        <el-form :inline="true" style="margin-top: 10px;height: 45px;">
             <el-form-item>
                 <el-radio-group v-model="day" @change="radioClick">
                     <el-radio-button  label="1">今天</el-radio-button>
                     <el-radio-button label="7">近7天</el-radio-button>
                     <el-radio-button  label="15">近15天</el-radio-button>
                     <el-radio-button label="30">近30天</el-radio-button>
                 </el-radio-group>
             </el-form-item>
                <el-form-item>
                    <el-date-picker
                            v-model="time"
                            type="daterange"
                            range-separator="至"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            <el-form-item>
                <el-input v-model="searchKey" class="search-input" placeholder="企业名称/管理员电话" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button class="search-btn" @click="search" type="text"  size="medium">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button class="search-btn" @click="exportDetail" type="text" size="medium">导出</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="activityList"
                border
                tooltip-effect="dark"
                style="width: 100%;margin-top: 5px;"
                 >
            <el-table-column
                    label="序号"
                    align="center"
                    width="60">
                <template slot-scope="scope">
                    <div>{{ scope.row.orderId }}</div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    align="center"
                    label="企业名称"
            >
            </el-table-column>
            <el-table-column
                    prop="orderTime"
                    align="center"
                    label="下单时间"
            >
            </el-table-column>
            <el-table-column
                    prop="orderMoney"
                    align="center"
                    label="订单金额">
            </el-table-column>
            <el-table-column
                    prop="name"
                    align="center"
                    label="管理员名称">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    align="center"
                    label="联系电话">
            </el-table-column>

            <el-table-column
                    label="操作"
                    align="center"
                    width="140">
                <template slot-scope="scope">
                    <div style="text-align: center;">
                        <!-- <el-button class="deleteCard" disabled @click="deleteCard(scope.row.a)" type="text" size="medium">删除</el-button> -->
                        <el-button class="checkCard" @click="detail(scope.row)" type="text" style="color: #51cdcb;" size="medium">详情</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="pageNum"
                :page-sizes="[10]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>
<script>
    import {queryByActivityById } from '@/api/api.js';
    import { str2date, getCookie } from '@/utils/util.js';
    import { serverUrl } from "@/utils/server.js";

    const Qs = require('qs');


    export default {
        data() {
            return {
                day: '0',
                time:[],
                searchKey:'',
                total: 0,
                pageNum: 1,
                activityList:[],
                orderNum:0,
                orderPrice : 0,
                activity: {
                    activityId:'',
                    name:'',
                    status:'',
                    content:'',
                    publishTime:'',
                    startTime:'',
                    createTimed:'',
                    createUserId:'',
                    price:'',
                    activityType:'',
                    duration:'',
                    endTime:'',
                    phoneNum:'',
                    setMeal:'',
                    activityOrders:[]
                }
            };
        },
        async created() {
            const detail = await queryByActivityById({activityId:this.$route.query.id});
            if(detail.code == 200){
                this.activity = detail.data;
                const unit =  this.activity.activityType == 1 ? "年" : this.activity.activityType == 2 ? "位" : this.activity.activityType ==  3 ? "次" : "";
                const activityTypeText = this.activity.activityType == 1 ? "名片时长" : this.activity.activityType == 2 ? "名片使用人数" : this.activity.activityType == 3 ? "短视频数量" : "";
                this.activity.setMeal = activityTypeText + "/" + this.activity.duration + unit + "/" +  this.activity.price +" 元";
                console.log(this.activity)
                if(this.activity && this.activity.activityOrders){
                    this.activityList =  this.activity.activityOrders;
                    this.activity.activityOrders.forEach(item =>{
                        this.orderNum ++;
                        this.orderPrice += item.orderMoney;
                    })
                    this.orderPrice = this.orderPrice.toFixed(2);
                    this.total = this.activity.activityOrders.length;
                }else{
                    this.activityList = [];
                }
            }
        },
        mounted() {

        },
        methods: {
            radioClick(val){
                this.search();
            },
            async search(){
                let param = {
                    activityId:this.$route.query.id,
                    startTime:this.time ? this.time[0] : '',endTime:this.time ? this.time[1] : '',
                    companyName:this.searchKey,
                    pageNum: this.pageNum
                };
                if(this.day != '0'){
                    param.day = this.day;
                }
                const detail = await queryByActivityById(param);
                console.log(detail)
                if(detail.code == 200){
                    this.activity = detail.data;
                    if(this.activity && this.activity.activityOrders){
                        this.orderNum  = 0 ;
                        this.orderPrice = 0;
                        this.activityList =  this.activity.activityOrders;
                        this.activity.activityOrders.forEach(item =>{
                            this.orderNum ++;
                            this.orderPrice += item.orderMoney;
                        })
                        this.orderPrice = this.orderPrice.toFixed(2);
                    }else{
                        this.activityList = [];
                    }
                }
            },
            exportDetail(){
                let param = {
                    activityId:this.$route.query.id,
                    startTime:this.time ? this.time[0] : '',endTime:this.time ? this.time[1] : '',
                    companyName:this.searchKey
                };
                if(this.day != '0'){
                    param.day = this.day;
                }

                //  配置请求头
                let headers = new Headers()
                headers.append('token', getCookie('token'))
                headers.append('Content-Type', 'application/x-www-form-urlencoded')
                fetch(serverUrl.baseURL + 'activity/exportActivity', {
                    headers: headers,
                    method: 'POST',
                    body: Qs.stringify(param)
                }).then(res=>{
                    return res.blob();
                }).then(res=>{
                    let link = document.createElement('a');
                    let url = window.URL.createObjectURL(res);
                    link.href = url;
                    link.download = '活动订单.xls';

                    link.click();
                    window.URL.revokeObjectURL
                });
            },
            detail(row){
                sessionStorage.setItem("orderDetail",JSON.stringify(row));
                this.$router.push({path:"/orderDetail"});
            },
            handleCurrentChange(val){
                this.pageNum = val;
                this.search();

            }
        }
    }
</script>
<style lang="scss">
    .page-customerManage{
        background: #fff;
        position: relative;
        padding-left: 20px;
        .el-form-item{
            margin-bottom: 0px;
        }
        .search-btn{
            margin-top: 0px;
            border-radius: 4px;
            // background: #B9EBEA;
            background: #51CDCB;
            font-size: 14px;
            line-height: 38px;
            height: 38px;
            color: #fff;
            padding: 0 20px;
            cursor: pointer;
        }
        .el-radio-button__inner{
            white-space: nowrap;
            background: #FFF;
            border: 1px solid #DCDFE6;
            font-weight: 500;
            border-left: 0;
            color: #606266;
            -webkit-appearance: none;
            text-align: center;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            outline: 0;
            margin: 0;
            position: relative;
            cursor: pointer;
            -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
            transition: all .3s cubic-bezier(.645,.045,.355,1);
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 0;
        }
    }

</style>
